<template>
  <view class="trust-sync-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">跨浏览器信任状态同步</text>
      <text class="page-subtitle">保持你的信任数据在所有设备上同步</text>
    </view>
    
    <!-- 同步管理器组件 -->
    <TrustSyncManager 
      :showControls="true"
      :showSyncInfo="true"
      :showHistory="true"
      :autoSync="true"
    />
    
    <!-- 同步状态概览 -->
    <view class="sync-overview">
      <text class="section-title">同步概览</text>
      
      <view class="overview-cards">
        <view class="overview-card">
          <text class="card-icon">📊</text>
          <text class="card-title">数据模块</text>
          <text class="card-value">{{ dataModules.length }}</text>
          <text class="card-desc">已同步模块</text>
        </view>
        
        <view class="overview-card">
          <text class="card-icon">🔄</text>
          <text class="card-title">同步次数</text>
          <text class="card-value">{{ syncStatistics.totalSyncs }}</text>
          <text class="card-desc">总同步次数</text>
        </view>
        
        <view class="overview-card">
          <text class="card-icon">✅</text>
          <text class="card-title">成功率</text>
          <text class="card-value">{{ syncStatistics.successRate }}%</text>
          <text class="card-desc">同步成功率</text>
        </view>
        
        <view class="overview-card">
          <text class="card-icon">⚠️</text>
          <text class="card-title">冲突数量</text>
          <text class="card-value">{{ syncStatistics.conflictCount }}</text>
          <text class="card-desc">待解决冲突</text>
        </view>
      </view>
    </view>
    
    <!-- 数据模块状态 -->
    <view class="data-modules">
      <text class="section-title">数据模块状态</text>
      
      <view class="modules-list">
        <view 
          class="module-item" 
          v-for="module in dataModules" 
          :key="module.id"
          :class="module.status"
        >
          <view class="module-header">
            <text class="module-icon">{{ module.icon }}</text>
            <text class="module-name">{{ module.name }}</text>
            <view class="module-status" :class="module.status">
              <text class="status-text">{{ getStatusText(module.status) }}</text>
            </view>
          </view>
          
          <text class="module-description">{{ module.description }}</text>
          
          <view class="module-info">
            <text class="info-item">本地大小: {{ formatSize(module.localSize) }}</text>
            <text class="info-item">远程大小: {{ formatSize(module.remoteSize) }}</text>
            <text class="info-item">最后同步: {{ formatTime(module.lastSync) }}</text>
          </view>
          
          <view class="module-actions">
            <button class="action-btn" @click="syncModule(module.id)">
              <text class="btn-text">同步</text>
            </button>
            <button class="action-btn secondary" @click="viewModuleDetails(module.id)">
              <text class="btn-text">详情</text>
            </button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 同步历史 -->
    <view class="sync-history">
      <text class="section-title">同步历史</text>
      
      <view class="history-filters">
        <button 
          class="filter-btn" 
          v-for="filter in historyFilters" 
          :key="filter.value"
          :class="{ active: selectedFilter === filter.value }"
          @click="selectFilter(filter.value)"
        >
          <text class="filter-text">{{ filter.label }}</text>
        </button>
      </view>
      
      <view class="history-list">
        <view 
          class="history-item" 
          v-for="entry in filteredHistory" 
          :key="entry.id"
          :class="entry.status"
        >
          <view class="history-header">
            <text class="history-icon">{{ getHistoryIcon(entry.status) }}</text>
            <text class="history-time">{{ formatTime(entry.timestamp) }}</text>
          </view>
          <text class="history-description">{{ entry.description }}</text>
          <text class="history-details" v-if="entry.details">{{ formatDetails(entry.details) }}</text>
        </view>
      </view>
    </view>
    
    <!-- 同步设置 -->
    <view class="sync-settings">
      <text class="section-title">同步设置</text>
      
      <view class="settings-list">
        <view class="setting-item">
          <text class="setting-label">自动同步</text>
          <switch 
            :checked="settings.autoSync" 
            @change="toggleAutoSync"
            color="#667eea"
          />
        </view>
        
        <view class="setting-item">
          <text class="setting-label">同步间隔</text>
          <picker 
            :value="settings.syncIntervalIndex" 
            :range="syncIntervals" 
            @change="changeSyncInterval"
          >
            <text class="picker-text">{{ syncIntervals[settings.syncIntervalIndex] }}</text>
          </picker>
        </view>
        
        <view class="setting-item">
          <text class="setting-label">冲突解决策略</text>
          <picker 
            :value="settings.conflictStrategyIndex" 
            :range="conflictStrategies" 
            @change="changeConflictStrategy"
          >
            <text class="picker-text">{{ conflictStrategies[settings.conflictStrategyIndex] }}</text>
          </picker>
        </view>
        
        <view class="setting-item">
          <text class="setting-label">数据加密</text>
          <switch 
            :checked="settings.dataEncryption" 
            @change="toggleDataEncryption"
            color="#667eea"
          />
        </view>
        
        <view class="setting-item">
          <text class="setting-label">同步服务器</text>
          <input 
            class="server-input" 
            v-model="settings.syncServer" 
            placeholder="输入服务器地址"
          />
        </view>
      </view>
      
      <view class="settings-actions">
        <button class="action-btn primary" @click="saveSettings">
          <text class="btn-text">保存设置</text>
        </button>
        <button class="action-btn secondary" @click="resetSettings">
          <text class="btn-text">重置设置</text>
        </button>
      </view>
    </view>
    
    <!-- 数据导入导出 -->
    <view class="data-import-export">
      <text class="section-title">数据管理</text>
      
      <view class="import-export-actions">
        <button class="action-btn primary" @click="exportData">
          <text class="btn-icon">📤</text>
          <text class="btn-text">导出数据</text>
        </button>
        
        <button class="action-btn secondary" @click="importData">
          <text class="btn-icon">📥</text>
          <text class="btn-text">导入数据</text>
        </button>
        
        <button class="action-btn tertiary" @click="clearAllData">
          <text class="btn-icon">🗑️</text>
          <text class="btn-text">清空数据</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import TrustSyncManager from '@/pages/game/trust-fall/components/trust/TrustSyncManager.vue'
import trustSyncManager from '@/utils/trust-sync-manager.js'

export default {
  name: 'TrustSyncPage',
  components: {
    TrustSyncManager
  },
  
  data() {
    return {
      dataModules: [
        {
          id: 'trustCards',
          name: '信任卡牌',
          description: '信任卡牌数据和状态',
          icon: '🃏',
          status: 'synced',
          localSize: 0,
          remoteSize: 0,
          lastSync: null
        },
        {
          id: 'dashboard',
          name: '信任仪表盘',
          description: '信任行为统计和分析数据',
          icon: '📊',
          status: 'synced',
          localSize: 0,
          remoteSize: 0,
          lastSync: null
        },
        {
          id: 'branch',
          name: '信任分支',
          description: '信任剧情和选择历史',
          icon: '🌿',
          status: 'synced',
          localSize: 0,
          remoteSize: 0,
          lastSync: null
        },
        {
          id: 'drag',
          name: '拖拽组合',
          description: '拖拽组合历史和统计',
          icon: '🔄',
          status: 'synced',
          localSize: 0,
          remoteSize: 0,
          lastSync: null
        }
      ],
      syncStatistics: {
        totalSyncs: 0,
        successRate: 0,
        conflictCount: 0
      },
      selectedFilter: 'all',
      historyFilters: [
        { label: '全部', value: 'all' },
        { label: '成功', value: 'success' },
        { label: '失败', value: 'error' },
        { label: '冲突', value: 'conflict' }
      ],
      settings: {
        autoSync: true,
        syncIntervalIndex: 1,
        conflictStrategyIndex: 0,
        dataEncryption: true,
        syncServer: null // 暂时禁用远程同步服务器
      },
      syncIntervals: ['1分钟', '5分钟', '15分钟', '30分钟', '1小时'],
      conflictStrategies: ['询问用户', '使用本地', '使用远程', '自动合并']
    }
  },
  
  computed: {
    filteredHistory() {
      if (this.selectedFilter === 'all') {
        return this.syncHistory
      }
      return this.syncHistory.filter(entry => entry.status === this.selectedFilter)
    }
  },
  
  onLoad() {
    this.initializePage()
  },
  
  methods: {
    // 初始化页面
    async initializePage() {
      await this.loadSyncData()
      await this.updateModuleStatus()
      await this.updateStatistics()
    },
    
    // 加载同步数据
    async loadSyncData() {
      try {
        // 加载同步历史
        this.syncHistory = trustSyncManager.getSyncHistory()
        
        // 加载设置
        const settings = await trustSyncManager.getSyncSettings()
        this.settings = { ...this.settings, ...settings }
        
      } catch (error) {
        console.error('Failed to load sync data:', error)
      }
    },
    
    // 更新模块状态
    async updateModuleStatus() {
      for (const module of this.dataModules) {
        try {
          // 获取本地数据大小
          const localData = uni.getStorageSync(trustSyncManager.getStorageKey(module.id))
          module.localSize = localData ? localData.length : 0
          
          // 模拟远程数据大小
          module.remoteSize = Math.floor(Math.random() * 1000) + 500
          
          // 模拟最后同步时间
          module.lastSync = Date.now() - Math.floor(Math.random() * 86400000)
          
          // 模拟状态
          const statuses = ['synced', 'pending', 'error', 'conflict']
          module.status = statuses[Math.floor(Math.random() * statuses.length)]
          
        } catch (error) {
          console.error(`Failed to update module ${module.id}:`, error)
        }
      }
    },
    
    // 更新统计信息
    async updateStatistics() {
      try {
        const history = trustSyncManager.getSyncHistory()
        const conflicts = trustSyncManager.getConflicts()
        
        this.syncStatistics = {
          totalSyncs: history.length,
          successRate: history.length > 0 ? 
            Math.round((history.filter(h => h.status === 'success').length / history.length) * 100) : 0,
          conflictCount: conflicts.length
        }
        
      } catch (error) {
        console.error('Failed to update statistics:', error)
      }
    },
    
    // 同步模块
    async syncModule(moduleId) {
      try {
        uni.showLoading({
          title: '同步中...'
        })
        
        // 模拟同步过程
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 更新模块状态
        const module = this.dataModules.find(m => m.id === moduleId)
        if (module) {
          module.status = 'synced'
          module.lastSync = Date.now()
        }
        
        uni.hideLoading()
        uni.showToast({
          title: '同步成功',
          icon: 'success'
        })
        
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '同步失败',
          icon: 'error'
        })
      }
    },
    
    // 查看模块详情
    viewModuleDetails(moduleId) {
      uni.showModal({
        title: '模块详情',
        content: `模块 ${moduleId} 的详细信息`,
        showCancel: false
      })
    },
    
    // 选择历史过滤器
    selectFilter(filter) {
      this.selectedFilter = filter
    },
    
    // 切换自动同步
    toggleAutoSync(event) {
      this.settings.autoSync = event.detail.value
    },
    
    // 更改同步间隔
    changeSyncInterval(event) {
      this.settings.syncIntervalIndex = event.detail.value
    },
    
    // 更改冲突策略
    changeConflictStrategy(event) {
      this.settings.conflictStrategyIndex = event.detail.value
    },
    
    // 切换数据加密
    toggleDataEncryption(event) {
      this.settings.dataEncryption = event.detail.value
    },
    
    // 保存设置
    async saveSettings() {
      try {
        await trustSyncManager.saveSyncSettings(this.settings)
        
        uni.showToast({
          title: '设置已保存',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('Failed to save settings:', error)
        uni.showToast({
          title: '保存失败',
          icon: 'error'
        })
      }
    },
    
    // 重置设置
    resetSettings() {
      uni.showModal({
        title: '确认重置',
        content: '确定要重置所有设置吗？',
        success: (res) => {
          if (res.confirm) {
            this.settings = {
              autoSync: true,
              syncIntervalIndex: 1,
              conflictStrategyIndex: 0,
              dataEncryption: true,
              syncServer: null // 暂时禁用远程同步服务器
            }
            
            uni.showToast({
              title: '设置已重置',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 导出数据
    exportData() {
      try {
        const data = trustSyncManager.exportData()
        const dataStr = JSON.stringify(data, null, 2)
        
        // 在UniApp中，可以使用uni.setClipboardData复制到剪贴板
        uni.setClipboardData({
          data: dataStr,
          success: () => {
            uni.showToast({
              title: '数据已复制到剪贴板',
              icon: 'success'
            })
          }
        })
        
      } catch (error) {
        console.error('Failed to export data:', error)
        uni.showToast({
          title: '导出失败',
          icon: 'error'
        })
      }
    },
    
    // 导入数据
    importData() {
      uni.showModal({
        title: '导入数据',
        content: '请将数据粘贴到输入框中',
        editable: true,
        success: async (res) => {
          if (res.confirm && res.content) {
            try {
              const data = JSON.parse(res.content)
              const success = await trustSyncManager.importData(data)
              
              if (success) {
                uni.showToast({
                  title: '导入成功',
                  icon: 'success'
                })
                this.initializePage()
              } else {
                uni.showToast({
                  title: '导入失败',
                  icon: 'error'
                })
              }
            } catch (error) {
              uni.showToast({
                title: '数据格式错误',
                icon: 'error'
              })
            }
          }
        }
      })
    },
    
    // 清空数据
    clearAllData() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有同步数据吗？此操作不可恢复！',
        success: (res) => {
          if (res.confirm) {
            try {
              trustSyncManager.clearAllData()
              
              uni.showToast({
                title: '数据已清空',
                icon: 'success'
              })
              
              this.initializePage()
            } catch (error) {
              uni.showToast({
                title: '清空失败',
                icon: 'error'
              })
            }
          }
        }
      })
    },
    
    // 获取状态文本
    getStatusText(status) {
      const texts = {
        synced: '已同步',
        pending: '待同步',
        error: '同步错误',
        conflict: '有冲突'
      }
      return texts[status] || '未知'
    },
    
    // 获取历史图标
    getHistoryIcon(status) {
      const icons = {
        success: '✅',
        error: '❌',
        conflict: '⚠️',
        info: 'ℹ️'
      }
      return icons[status] || '❓'
    },
    
    // 格式化大小
    formatSize(bytes) {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },
    
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '从未'
      
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) {
        return '刚刚'
      } else if (diff < 3600000) {
        return `${Math.floor(diff / 60000)}分钟前`
      } else if (diff < 86400000) {
        return `${Math.floor(diff / 3600000)}小时前`
      } else {
        return date.toLocaleString()
      }
    },
    
    // 格式化详情
    formatDetails(details) {
      if (typeof details === 'object') {
        return JSON.stringify(details)
      }
      return details
    }
  }
}
</script>

<style scoped>
.trust-sync-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
  color: white;
}

/* 页面头部 */
.page-header {
  text-align: center;
  margin-bottom: 30rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 30rpx;
  backdrop-filter: blur(10rpx);
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
  text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}

.page-subtitle {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 章节标题 */
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  text-align: center;
  color: white;
}

/* 同步概览 */
.sync-overview {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.overview-cards {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.overview-card {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.card-icon {
  font-size: 32rpx;
}

.card-title {
  font-size: 20rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.card-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #667eea;
  margin-right: 8rpx;
}

.card-desc {
  font-size: 16rpx;
  color: #666;
}

/* 数据模块 */
.data-modules {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.modules-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.module-item {
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 20rpx;
  transition: all 0.3s ease;
}

.module-item.synced {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.05);
}

.module-item.pending {
  border-color: #ff9800;
  background: rgba(255, 152, 0, 0.05);
}

.module-item.error {
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.05);
}

.module-item.conflict {
  border-color: #9c27b0;
  background: rgba(156, 39, 176, 0.05);
}

.module-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.module-icon {
  font-size: 24rpx;
}

.module-name {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.module-status {
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
  font-size: 14rpx;
  font-weight: bold;
}

.module-status.synced {
  background: #e8f5e8;
  color: #4caf50;
}

.module-status.pending {
  background: #fff3e0;
  color: #ff9800;
}

.module-status.error {
  background: #ffebee;
  color: #f44336;
}

.module-status.conflict {
  background: #f3e5f5;
  color: #9c27b0;
}

.status-text {
  font-size: 12rpx;
}

.module-description {
  font-size: 18rpx;
  color: #666;
  margin-bottom: 12rpx;
  display: block;
}

.module-info {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.info-item {
  font-size: 16rpx;
  color: #999;
}

.module-actions {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  flex: 1;
  padding: 8rpx 16rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 16rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:not(.secondary):not(.tertiary) {
  background: #667eea;
  color: white;
}

.action-btn:not(.secondary):not(.tertiary):hover {
  background: #5a6fd8;
}

.action-btn.secondary {
  background: #f5f5f5;
  color: #666;
}

.action-btn.secondary:hover {
  background: #e0e0e0;
}

.action-btn.tertiary {
  background: #f44336;
  color: white;
}

.action-btn.tertiary:hover {
  background: #d32f2f;
}

.btn-text {
  font-size: 14rpx;
}

/* 同步历史 */
.sync-history {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.history-filters {
  display: flex;
  gap: 8rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6rpx 12rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 16rpx;
  background: white;
  color: #666;
  font-size: 14rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.filter-text {
  font-size: 12rpx;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  max-height: 400rpx;
  overflow-y: auto;
}

.history-item {
  padding: 12rpx;
  border-radius: 8rpx;
  border-left: 4rpx solid #e0e0e0;
}

.history-item.success {
  background: rgba(76, 175, 80, 0.1);
  border-left-color: #4caf50;
}

.history-item.error {
  background: rgba(244, 67, 54, 0.1);
  border-left-color: #f44336;
}

.history-item.conflict {
  background: rgba(156, 39, 176, 0.1);
  border-left-color: #9c27b0;
}

.history-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 4rpx;
}

.history-icon {
  font-size: 16rpx;
}

.history-time {
  font-size: 14rpx;
  color: #666;
}

.history-description {
  font-size: 16rpx;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.history-details {
  font-size: 14rpx;
  color: #666;
}

/* 同步设置 */
.sync-settings {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-label {
  font-size: 18rpx;
  color: #333;
  flex: 1;
}

.picker-text {
  font-size: 16rpx;
  color: #667eea;
  padding: 8rpx 12rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
}

.server-input {
  flex: 1;
  padding: 8rpx 12rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 16rpx;
  background: white;
}

.settings-actions {
  display: flex;
  gap: 12rpx;
}

.settings-actions .action-btn {
  flex: 1;
  padding: 12rpx 20rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 18rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.settings-actions .action-btn.primary {
  background: #667eea;
  color: white;
}

.settings-actions .action-btn.primary:hover {
  background: #5a6fd8;
}

.settings-actions .action-btn.secondary {
  background: #f5f5f5;
  color: #666;
}

.settings-actions .action-btn.secondary:hover {
  background: #e0e0e0;
}

/* 数据导入导出 */
.data-import-export {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.import-export-actions {
  display: flex;
  gap: 12rpx;
  flex-wrap: wrap;
}

.import-export-actions .action-btn {
  flex: 1;
  min-width: 120rpx;
  padding: 16rpx 20rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 18rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
}

.import-export-actions .action-btn.primary {
  background: #4caf50;
  color: white;
}

.import-export-actions .action-btn.primary:hover {
  background: #45a049;
}

.import-export-actions .action-btn.secondary {
  background: #2196f3;
  color: white;
}

.import-export-actions .action-btn.secondary:hover {
  background: #1976d2;
}

.import-export-actions .action-btn.tertiary {
  background: #f44336;
  color: white;
}

.import-export-actions .action-btn.tertiary:hover {
  background: #d32f2f;
}

.btn-icon {
  font-size: 20rpx;
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-sync-page {
    padding: 16rpx;
  }
  
  .overview-cards {
    flex-direction: column;
  }
  
  .module-info {
    flex-direction: column;
    gap: 8rpx;
  }
  
  .module-actions {
    flex-direction: column;
  }
  
  .history-filters {
    flex-direction: column;
  }
  
  .settings-actions,
  .import-export-actions {
    flex-direction: column;
  }
}
</style>

